<div class="breadCrumb clearfix">    
    <ul id="breadcrumbs">
        <li><a href="index-2.html">Home</a></li>
        <li><a href="#">Forms stuff</a></li>
        <li>Form wizard</li>
    </ul>        
</div>

<div class="content">
            
    <div class="row-fluid">
        
        <div class="span6">
            
            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-redo"></i></div>
                    <h2>Default wizard</h2>
                </div>                
                <div class="block-fluid">                

                    <form action="javascript:notify('Wizard','Form #wizard submited');" method="POST" id="wizard">
                            <fieldset title="Step 1">                            
                                    <legend>Fields</legend>
                                    <div class="row-form">
                                        <div class="span3">First Name:</div><div class="span9"><input type="text" name="fname"/></div>
                                    </div>
                                    <div class="row-form">
                                        <div class="span3">Second Name:</div><div class="span9"><input type="password" name="sname"/></div>
                                    </div>                                
                                    <div class="row-form">
                                        <div class="span3">City:</div><div class="span9"><input type="text" name="city"/></div>
                                    </div>                                
                                    <div class="row-form">
                                        <div class="span3">Country:</div>
                                        <div class="span9">
                                            <select class="select" name="country" style="width: 100%;">
                                                <option value="0">Italy</option>
                                                <option value="1">Andorra</option>
                                                <option value="2">Antarctica</option>                                
                                                <option value="3">Ukraine</option>      
                                            </select>
                                        </div>
                                    </div>                                                             
                            </fieldset>

                            <fieldset title="Step 2">
                                    <legend>Text</legend>
                                    <div class="row-form">
                                        <div class="span12">
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer molestie rhoncus elit lobortis lacinia.</p>
                                            <ul>
                                                <li>Aliquam laoreet vehicula odio.</li>
                                                <li>Faucibus congue risus vehicula et.</li>
                                                <li>Fusce consequat porta sagittis.</li>
                                            </ul>
                                            <p> Donec nec ante purus. Mauris auctor risus eu ante porttitor mollis. Praesent eleifend mauris at odio porttitor iaculis.</p>
                                            <p>Duis libero nisl, rutrum et rutrum quis, iaculis non justo. Quisque libero nisl, egestas quis condimentum consectetur, elementum id felis. Vivamus consectetur semper mi ut rhoncus.</p>
                                            <p>Aliquam eu metus ullamcorper sapien ultrices tincidunt at vitae sem. Aenean sit amet urna ac massa bibendum facilisis id id leo.</p>
                                        </div>
                                    </div>                                        
                            </fieldset>

                            <input type="submit" class="btn btn-primary finish" value="Submit" />
                    </form>                

                </div>

            </div>
            
        </div>
        
        <div class="span6">
            
            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-lightning"></i></div>
                    <h2>Wizard with validation</h2>
                </div>                
                <div class="block-fluid">                

                    <form action="javascript:notify('Wizard','Form #wizard_validate submited')" method="POST" id="wizard_validate">
                            <fieldset title="Step 1">                            
                                    <legend>Registration</legend>
                                    <div class="row-form">
                                        <div class="span3">Login:</div>
                                        <div class="span9">
                                            <input type="text" name="login" class="validate[required,minSize[4]]"/>
                                            <span class="bottom">Required, minSize = 4</span>
                                        </div>
                                    </div>
                                    <div class="row-form">
                                        <div class="span3">Password:</div>
                                        <div class="span9">
                                            <input type="password" name="password" class="validate[required,minSize[4],maxSize[10]]"/>
                                            <span class="bottom">Required, minSize = 4, maxSize = 10</span>
                                        </div>
                                    </div>                                
                                    <div class="row-form">
                                        <div class="span3">E-mail:</div>
                                        <div class="span9">
                                            <input type="text" name="email" class="validate[required,custom[email]]"/>
                                            <span class="bottom">Required, email</span>
                                        </div>
                                    </div>                                
                            </fieldset>

                            <fieldset title="Step 2">
                                    <legend>Personal data</legend>
                                    <div class="row-form">
                                        <div class="span3">Nickname:</div><div class="span9"><input type="text" name="nick"/></div>
                                    </div>
                                    <div class="row-form">
                                        <div class="span3">About:</div>
                                        <div class="span9">
                                            <textarea name="about" class="validate[required,minSize[5],maxSize[150]]"></textarea>
                                            <span class="bottom">Required, minSize = 5, maxSize = 150</span>
                                        </div>
                                    </div>  
                            </fieldset>

                            <input type="submit" class="btn btn-primary finish" value="Submit" />
                    </form>                

                </div>

            </div>
            
        </div>            
        
    </div>
    
    <div class="row-fluid">
        
        <div class="span6">
            
            <div class="widget">
                <div class="head">
                    <div class="icon"><i class="icosg-flag1"></i></div>
                    <h2>Wizard with AJAX steps</h2>
                </div>                
                <div class="block-fluid">                

                    <form action="javascript:void(0);" method="POST" id="wizard_ajax">
                            <fieldset title="Step 1">                            
                                    <legend>Your data</legend>
                                    <div class="row-form">
                                        <div class="span12">
                                            <span class="top title">Forgot your password?</span>
                                            <span class="top">Use this form to return it!</span>
                                        </div>
                                    </div>                                        
                                    <div class="row-form">
                                        <div class="span3">Login:</div>
                                        <div class="span9">
                                            <span class="top">Accept only: John</span>
                                            <input type="text" name="login" class="validate[required,minSize[2]]"/>
                                            <span class="bottom">Required, minSize = 2</span>
                                        </div>
                                    </div>          
                                    <div class="row-form">
                                        <div class="span3">E-mail:</div>
                                        <div class="span9">
                                            <span class="top">Accept only: john@example.com</span>
                                            <input type="text" name="email" class="validate[required,custom[email]]"/>
                                            <span class="bottom">Required, email</span>
                                        </div>
                                    </div>                                
                            </fieldset>

                            <fieldset title="Step 2">
                                    <legend>Code from email</legend>
                                    <div class="row-form">
                                        <div class="span12">
                                            <span class="top title">Please enter code from email</span>                                                
                                        </div>
                                    </div>    
                                    <div class="row-form">
                                        <div class="span3">E-mail:</div>
                                        <div class="span9">
                                            <span class="top">Accept only: d8d3a01ba7e5d44394b6f0a8533f4647</span>
                                            <input type="text" name="hash" class="validate[required,minSize[32],maxSize[32]]"/>
                                            <span class="bottom">Required, Size = 32</span>
                                        </div>
                                    </div>                                                                                                                  
                            </fieldset>

                            <fieldset title="Step 3">
                                    <legend>New password</legend>
                                    <div class="row-form">
                                        <div class="span12">
                                            <span class="top title">Please enter your new password</span>                                                
                                        </div>
                                    </div>    
                                    <div class="row-form">
                                        <div class="span3">Password:</div>
                                        <div class="span9">
                                            <input type="password" class="validate[required,minSize[5],maxSize[10]]" id="password"/>
                                            <span class="bottom">Required, min size = 5, max size = 10</span>
                                        </div>
                                    </div>                    
                                    <div class="row-form">
                                        <div class="span3">Confirm Password:</div>
                                        <div class="span9">
                                            <input type="password" class="validate[required,equals[password]]"/>
                                            <span class="bottom">Required, equals Password</span>
                                        </div>
                                    </div>                                                                                                                
                            </fieldset>                            
                        
                            <input type="submit" class="btn btn-primary finish" value="Submit" />
                    </form>                                                                                        

                </div>

            </div>
            
        </div>            
        
    </div>
          
</div>  